<template>
	<div class="com-chart" ref="bar2_ref"></div>
</template>

<script>
	export default {
		name: 'Barchart2',
		data() {
			return {
				chartInstance: null,
				echartoption: {},
			}
		},
		mounted() {
			this.initChart();
			window.addEventListener("resize", () => {
				this.chartInstance.resize();
			});
		},
		destroyed() {
			window.removeEventListener("resize", () => {
				this.chartInstance.resize();
			});
		},
		methods: {
			initChart() {
				let data = [70, 34, 60, 78, 69];
				let titlename = ["增值税", "消费税", "企业所得税", "个人所得税", "资源税"];
				let valdata = [47170, 42689, 29022, 14040, 10543];
				let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
				this.chartInstance = this.$echarts.init(this.$refs.bar2_ref);
				this.echartoption = {
					//图标位置
					grid: {
						top: "10%",
						left: "22%",
						bottom: "10%"
					},
					xAxis: {
						show: false
					},
					yAxis: [{
							show: true,
							data: titlename,
							inverse: true,
							axisLine: {
								show: false
							},
							splitLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								color: "#fff",

								rich: {
									lg: {
										backgroundColor: "#339911",
										color: "#fff",
										borderRadius: 15,
										// padding: 5,
										align: "center",
										width: 15,
										height: 15
									}
								}
							}
						},
						{
							show: true,
							inverse: true,
							data: valdata,
							axisLabel: {
								textStyle: {
									fontSize: 12,
									color: "#fff"
								}
							}
						}
					],
					series: [{
							name: "条",
							type: "bar",
							yAxisIndex: 0,
							data: data,
							barCategoryGap: 50,
							barWidth: 10,
							itemStyle: {
								normal: {
									barBorderRadius: 20,
									color: function(params) {
										var num = myColor.length;
										return myColor[params.dataIndex % num];
									}
								}
							},
							label: {
								normal: {
									show: true,
									position: "inside",
									formatter: "{c}%"
								}
							}
						},
						{
							name: "框",
							type: "bar",
							yAxisIndex: 1,
							barCategoryGap: 50,
							data: [100, 100, 100, 100, 100],
							barWidth: 15,
							itemStyle: {
								normal: {
									color: "none",
									borderColor: "#00c1de",
									borderWidth: 3,
									barBorderRadius: 15
								}
							}
						}
					]
				};
				this.chartInstance.setOption(this.echartoption);
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
